<template>
    <div class="cooklist-Page">
        <div class="header">
            <div class="arrow-left" @click="$router.go(-1)">
                <img src="../assets/images/back_b_icon.png" alt="">
            </div>
            <div class="title" v-if="type=='video_recipe'">视频菜谱</div>
            <div class="title" v-if="type=='hotest'">热门菜谱</div>
            <div class="title" v-if="type=='latest'">菜谱推荐</div>
            <div class="title" v-if="type==null">{{title}}</div>
            <div style="width:100px;height:100%"></div>
        </div>
        <div style="height:45px"></div>
        <div class="videoCook" v-if="type=='video_recipe'">
            <div class="videoCon">
                <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
                <van-list
                  v-model="loading"
                  :finished="finished"
                  finished-text="没有更多了"
                  @load="onLoad"
                >
                <router-link class="vdeoItem" tag="div" :to="'/detail?id=' + item.id"  v-for="item in list" :key="item.id">
                    <div class="img" :style="{ 'background-image': 'url(https://pic.ecook.cn/web/'+item.imageid+'.jpg!wl280)' }"  v-lazy:background-image="'https://pic.ecook.cn/web/'+ item.imageid+'.jpg!wl280'">
                        <img class="playIcon" src="../assets/images/24gf-playCircle.png" alt="">
                    </div>
                    <div class="cookName">{{item.name}}</div>
                    <div class="otherInfo">
                        <div class="like">
                            <img src="../assets/images/点赞007.png" alt="">
                            <span class="num">{{item.likeCount}}</span>
                        </div>
                        <div class="collect">
                            <img src="../assets/images/213收藏.png" alt="">
                            <span class="num">{{item.collectCount}}</span>
                        </div>
                    </div>
                </router-link>
                </van-list>
                </van-pull-refresh>
            </div>
        </div>
        <div class="otherCook" v-else >
            <div class="otherCon">
                <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
                <van-list
                  v-model="loading"
                  :finished="finished"
                  finished-text="没有更多了"
                  @load="onLoad"
                >
                <router-link  tag="div" :to="'/detail?id=' + item.id" class="otherItem" v-for="item in list" :key="item.id">
                    <div class="img">
                        <img :src="'https://pic.ecook.cn/web/'+ item.imageid+'.jpg!wl280'" alt="" v-lazy="'https://pic.ecook.cn/web/'+ item.imageid+'.jpg!wl280'">
                        <img class="exclusive" v-if="item.infos.exclusive == 1" src="../assets/images/fl_bg_dj.png" alt="">
                    </div>
                    <div class="right">
                        <h4 class="one-txt-cut">{{item.name}}</h4>
                        <div class="materials one-txt-cut">{{item.materials}}</div>
                        <div class="authorname">{{item.user.nickname}}</div>
                        <div class="otherInfos">
                            <div class="collectNum">{{item.infos.collectionCount | Nums}}人收藏</div>
                            <div class="likeNum">{{item.infos.likeCount | Nums}}人点赞</div>
                        </div>
                    </div>
                </router-link>
                </van-list>
                </van-pull-refresh>
            </div>
        </div>
    </div>
</template>

<script>
import {getRecommendContentsData,getRecipeListData,getContentsBySubClassidData} from '../api/categorize'
export default {
    data() {
        return {
            videoList:[],//视频菜谱
            otherList:[],//其他菜谱
            type:null,//类型
            title:null,//标题
            list: [],
            loading: false,
            finished: false,
            refreshing: false,
        };
    },
    methods: {
        //获取视频菜谱数据
        getRecommendContentsFun(id,type){
            getRecommendContentsData({id,type,version:'16.8.0'}).then(data=>{
                console.log(data);
                this.videoList = data.list

                //重置收藏数量
                let tempCollectList = JSON.parse(window.localStorage.getItem("collectList"))
                if (tempCollectList) {
                    this.videoList.forEach(item=>{
                        tempCollectList.forEach(k=>{
                            if (item.id==k.id) {
                                item.collectCount = Number(item.collectCount)+1
                            }
                        })
                    })
                }
                // 重置点赞数量
                let tempLikeList = JSON.parse(window.localStorage.getItem("likeList"))
                if (tempLikeList) {
                    this.videoList.forEach(item=>{
                        tempLikeList.forEach(k=>{
                            if (item.id==k.id) {
                                item.likeCount = k.likeCount
                            }
                        })
                    })
                }
            })
        },
        //获取其他类型菜谱数据
        getRecipeListFun(id,type){
            getRecipeListData({id,type,version:'16.8.0'}).then(data=>{
                console.log(data);
                this.otherList = data.list
                this.restartlikeAcollectFun(this.otherList)
            })
        },
        //获取其他类型菜谱数据
        getContentsBySubClassidFun(id,page){
            getContentsBySubClassidData({id,page,version:'16.8.0'}).then(data=>{
                console.log(data);
                this.title = data.name
                this.otherList = data.list
                this.restartlikeAcollectFun(this.otherList)
            })
        },
        // 重置点赞收藏数量
        restartlikeAcollectFun(arr){
            //重置收藏数量
                let tempCollectList = JSON.parse(window.localStorage.getItem("collectList"))
                if (tempCollectList) {
                    arr.forEach(item=>{
                        tempCollectList.forEach(k=>{
                            if (item.id==k.id) {
                                item.infos.collectionCount = Number(item.infos.collectionCount)+1
                            }
                        })
                    })
                }
                // 重置点赞数量
                let tempLikeList = JSON.parse(window.localStorage.getItem("likeList"))
                if (tempLikeList) {
                    arr.forEach(item=>{
                        tempLikeList.forEach(k=>{
                            if (item.id==k.id) {
                                item.infos.likeCount = k.likeCount
                            }
                        })
                    })
                }
        },
        onLoad() {
            setTimeout(() => {
              if (this.refreshing) {
                this.list = [];
                this.refreshing = false;
              }

              if (this.otherList.length == 0) {
                for (let i = 0; i < 10; i++) {
                    this.list.push(this.videoList[i]);
                }
              }else if(this.videoList.length == 0){
                for (let i = 0; i < 10; i++) {
                    this.list.push(this.otherList[i]);
                }
              }
              this.loading = false;

              if (this.list.length >= 10) {
                this.finished = true;
              }
            }, 1000);
        },
        onRefresh() {
            // 清空列表数据
            this.finished = false;

            // 重新加载数据
            // 将 loading 设置为 true，表示处于加载状态
            this.loading = true;
            this.onLoad();
        },
    },
    created() {
        if (this.$route.query.type) {    
            this.type = this.$route.query.type
        }
        if (this.$route.query.type=="video_recipe") {
            this.getRecommendContentsFun(this.$route.query.id,this.$route.query.type)
        }else if(this.$route.query.type=="hotest" || this.$route.query.type=="latest"){
            this.getRecipeListFun(this.$route.query.id,this.$route.query.type)
        }else if(this.$route.query.id > 0){
            this.getContentsBySubClassidFun(this.$route.query.id,1)
        }
    },
    filters:{
        Nums(value){
            if (value<1000) {
                return value
            }
            let w = value>1000?value/1000:value
            let t = String(w).split(".")
            let d = Number("0."+t[1]) > 0.1?"."+t[1].slice(0,1):''
            let r = `${t[0]}${d}k`
            return r
        }
    }
}
</script>

<style lang="less" scoped>
.cooklist-Page{
    width: 100%;
    height: 100%;
    overflow-y: scroll;

    .header{
        width: 100%;
        height: 45px;
        background-color: #fff;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 999;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .arrow-left{
            width: 100px;
            height: 100%;
            display: flex;
            align-items: center;
            &>img{
                width: 13px;
                height: 20px;
                display: block;
                margin-left: 15px;
            }
        }
        .title{
            flex: 1;
            text-align: center;
            font-weight: bold;
            letter-spacing: 0.5px;
        }
    }
    .videoCook{
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        padding: 5px 15px 0 15px;

        .videoCon{
            width: 100%;

            .vdeoItem{
                padding-bottom: 15px;
                text-align: center;

                .img{
                    width: 100%;
                    height: 180px;
                    border-radius: 6px;
                    overflow: hidden;
                    position: relative;
                    background-image: url(https://pic.ecook.cn/web/263785241.jpg!wl280);
                    background-position: center center;
                    background-repeat: no-repeat;
                    background-size: cover;

                    .playIcon{
                        width: 45px;
                        height: 45px;
                        background-color: #fff;
                        border-radius: 50%;
                        position: absolute;
                        top: 0;
                        bottom: 0;
                        right: 0;
                        left: 0;
                        margin: auto;
                    }
                }
                .cookName{
                    margin: 10px 0;
                    font-size: 17px;
                    letter-spacing: 0.8px;
                    font-weight: 600;
                    line-height: 22px;
                }
                .otherInfo{
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    .like,
                    .collect{
                        margin: 0 8px;
                        display: flex;
                        align-items: center;
                        &>img{
                            width: 18px;
                            height: 18px;
                            margin-right: 3px;
                        }
                        .num {
                            font-size: 13px;
                            color: #8a8a8a;
                            font-weight: bold;
                        }
                    }
                }
            }
        }
    }
    .otherCook{
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        padding: 5px 15px 0 15px;

        .otherCon{
            width: 100%;

            .otherItem{
                width: 100%;
                height: 100px;
                display: flex;
                padding: 10px 0;

                .img{
                    flex: 0 0 140px;
                    height: 100%;
                    border-radius: 8px;
                    overflow: hidden;
                    margin-right: 15px;
                    position: relative;

                    .exclusive{
                        width: 52px;
                        height: 18px;
                        position: absolute;
                        top:0;
                        right: 0;
                    }
                }
                .right{
                    width: 190px;
                    height: 100%;

                    &>h4{
                        margin-top: 3px;
                        margin-bottom: 13px;
                        letter-spacing: 0.5px;
                        font-weight: bold;
                    }
                    .materials{
                        margin-bottom: 12px;
                        font-size: 13px;
                    }
                    .authorname{
                        font-size: 13px;
                        color: #000;
                        opacity: 0.5;
                        letter-spacing: 0.5px;
                        font-weight: bold;
                        margin-bottom: 15px;
                    }
                    .otherInfos{
                        display: flex;
                        .collectNum,
                        .likeNum{
                            font-size: 13px;
                            color: #000;
                            opacity: 0.5;
                            letter-spacing: 0.5px;
                            font-weight: bold;
                        }
                        .collectNum{
                            margin-right: 15px;
                        }
                    }
                }
            }
        }
    }
    
}
</style>